<template>
  <Form :model="form"
        ref="form"
        @click="onChange('form')"
        :rules="ruleInline"
        :label-width="100">
    <FormItem label="姓名/手机">
      <Select v-model="model14"
              placeholder="输入姓名/手机"
              multiple
              filterable
              remote
              :remote-method="remoteMethod2"
              :loading="loading2"
              style="width:200px">
        <Option v-for="item in options2"
                :value="item.value"
                :key="item.value">{{ item.label }}</Option>
      </Select>
      <span class="demo-data">New York</span>
    </FormItem>
    <FormItem label="卡名称">
      <Select v-model="model14"
              multiple
              filterable
              remote
              :remote-method="remoteMethod2"
              :loading="loading2"
              style="width:200px">
        <Option v-for="item in options2"
                :value="item.value"
                :key="item.value">{{ item.label }}</Option>
      </Select>
    </FormItem>
    <FormItem label="消费">
      <Input v-model="value12"
             style="width: 200px;">
      <Select v-model="select2"
              style="width: 50px;"
              slot="append">
        <Option value="com">元</Option>
        <Option value="org">次</Option>
      </Select>
      </Input>
    </FormItem>
    <FormItem label="备注">
      <Input v-model="value17"
             clearable
             maxlength="100"
             show-word-limit
             type="textarea"
             placeholder="请输入备注"
             style="width: 200px" />
    </FormItem>
  </Form>
</template>

<script>
export default {
  name: 'entry',
  data () {
    return {
      select2: 'com',
      current: 0,
      model14: [],
      loading2: false,
      options2: [],
      list: ['Alabama', 'Alaska', 'Arizona', 'Arkansas', 'California', 'Colorado', 'Connecticut', 'Delaware', 'Florida', 'Georgia', 'Hawaii', 'Idaho', 'Illinois', 'Indiana', 'Iowa', 'Kansas', 'Kentucky', 'Louisiana', 'Maine', 'Maryland', 'Massachusetts', 'Michigan', 'Minnesota', 'Mississippi', 'Missouri', 'Montana', 'Nebraska', 'Nevada', 'New hampshire', 'New jersey', 'New mexico', 'New york', 'North carolina', 'North dakota', 'Ohio', 'Oklahoma', 'Oregon', 'Pennsylvania', 'Rhode island', 'South carolina', 'South dakota', 'Tennessee', 'Texas', 'Utah', 'Vermont', 'Virginia', 'Washington', 'West virginia', 'Wisconsin', 'Wyoming']
    }
  },
  methods: {
    remoteMethod2 (query) {
      if (query !== '') {
        this.loading2 = true
        setTimeout(() => {
          this.loading2 = false
          const list = this.list.map(item => {
            return {
              value: item,
              label: item
            }
          })
          this.options2 = list.filter(item => item.label.toLowerCase().indexOf(query.toLowerCase()) > -1)
        }, 200)
      } else {
        this.options2 = []
      }
    }
  }

}
</script>

<style scoped lang="scss">
.demo-data {
  margin-left: 10px;
  color: #b3b3b3;
}
</style>
